<template>
  <form @submit.prevent="handleLogin">
    <div class="form-group">
      <label for="username">
        <i class="icon fas fa-user"></i>
        <span>用户名</span>
      </label>
      <input 
        type="text" 
        id="username" 
        v-model="username" 
        placeholder="请输入用户名"
        required
      >
    </div>
    
    <div class="form-group">
      <label for="password">
        <i class="icon fas fa-lock"></i>
        <span>密码</span>
      </label>
      <input 
        type="password" 
        id="password" 
        v-model="password" 
        placeholder="请输入密码"
        required
      >
    </div>
    
    <div class="remember-forgot">
      <label class="remember-me">
        <input type="checkbox" v-model="rememberMe">
        <span>记住我</span>
      </label>
    </div>
    
    <div v-if="errorMessage" class="error-message">
      <i class="fas fa-exclamation-circle"></i> {{ errorMessage }}
    </div>
    
    <button 
      type="submit" 
      class="submit-btn"
      :disabled="loading"
    >
      <span v-if="!loading">登录</span>
      <span v-else>
        <i class="fas fa-spinner fa-spin"></i> 登录中...
      </span>
    </button>
  </form>
</template>

<script>
import axios from 'axios';

export default {
  name: 'LoginPage',
  data() {
    return {
      username: '',
      password: '',
      rememberMe: false,
      loading: false,
      errorMessage: ''
    };
  },
  methods: {
  async handleLogin() {
    this.errorMessage = '';
    this.loading = true;

    try {
      const response = await axios.post('http://localhost:8083/user/login', {
        username: this.username,
        password: this.password
      }, {
        withCredentials: true 
      });

      // 1. 检查响应中的 success 字段
      if (!response.data.success) {
        // 2. 使用后端返回的具体错误信息
        this.errorMessage = response.data.errorMsg || '登录失败，未知错误';
        return;
      }

      // 3. 确保 data 字段存在
      const token = response.data.data;
      if (!token) {
        this.errorMessage = '服务器返回的token为空';
        return;
      }
      
      console.log('登录成功，Token:', token);
      sessionStorage.setItem("token", token);
      axios.defaults.headers.common['Authorization'] = token; 
      this.$router.push('/filesystem');
      
    } catch (error) {
      console.error('登录失败:', error);
      this.handleLoginError(error);
    } finally {
      this.loading = false;
    }
  },
  
  handleLoginError(error) {
    if (error.response) {
      // 优先使用后端返回的错误信息
      const serverError = error.response.data?.errorMsg;
      if (serverError) {
        this.errorMessage = serverError;
        return;
      }
      
      // 根据状态码显示默认错误信息
      switch (error.response.status) {
        case 400:
          this.errorMessage = '请求参数错误';
          break;
        case 401:
          this.errorMessage = '用户名或密码错误';
          break;
        case 403:
          this.errorMessage = '账户已被禁用';
          break;
        case 500:
          this.errorMessage = '服务器内部错误';
          break;
        default:
          this.errorMessage = `请求失败: ${error.response.status}`;
      }
    } else if (error.request) {
      this.errorMessage = '服务器无响应，请检查网络连接';
    } else {
      this.errorMessage = '请求发送失败: ' + error.message;
    }
  }
}
};
</script>


<style scoped>
.form-group {
  margin-bottom: 22px;
}

.form-group label {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-weight: 500;
  color: #555;
}

.icon {
  margin-right: 10px;
  color: #4776E6;
  width: 20px;
  text-align: center;
}

input {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s;
}

input:focus {
  border-color: #4776E6;
  box-shadow: 0 0 0 3px rgba(71, 118, 230, 0.2);
  outline: none;
}

.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 25px;
}

.remember-me {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.remember-me input {
  width: auto;
  margin-right: 8px;
}

.error-message {
  background-color: #ffebee;
  color: #c62828;
  padding: 12px 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.error-message i {
  margin-right: 8px;
}

.submit-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #3a68d6 0%, #7c45d9 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(71, 118, 230, 0.4);
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.fa-spinner {
  margin-right: 8px;
}

@media (max-width: 480px) {
  .remember-forgot {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
</style>